<template>
    <view class="history">
        <u-navbar back-text="返回" title="历史记录"></u-navbar>
        <view class="btn-group" v-if="true">
            <u-button size="mini" v-if="btnStatus != 'edit'" @click="btnStatus='edit'">管理</u-button>
            <u-button size="mini" type="primary" v-else @click="completeEdit">完成</u-button>
        </view>
        <plantList :listData="plantList" v-if="plantList.length > 0">
            <template #checkBox="scope">
                <view class="time">{{timeFormat(scope.checkBox.time, 'YY-MM-DD hh:mm:ss')}}</view>
                <view class="checkBox" v-if="btnStatus === 'edit'">
                    <u-checkbox v-model="scope.checkBox.checkBox" @change="change"></u-checkbox>
                </view>
                <view class="box" v-if="btnStatus === 'edit'" @click.stop="selCheck($event, scope.index)"></view>
            </template>
        </plantList>
        <u-empty v-else :text="loginStatus ? '无历史数据' : '没有权限，请先登录'" mode="history" margin-top="150">
            <template #bottom>
                <view v-if="!loginStatus">
                    点击<u-button type="primary" size="mini" @click="toLogin">登录</u-button>，即可登录
                </view>

            </template>
        </u-empty>
        <view class="more" v-if="bottomLoading && !noMore">
            <u-loading mode="flower"></u-loading>加载中...
        </view>
        <view class="noMore" v-if="noMore">没有更多了</view>
        <bottomTabBar></bottomTabBar>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import bottomTabBar from '@/components/bottom-tabbar.vue';
    import plantList from '@/components/plant-list.vue';
    import {
        timeDate,
        successToast,
        loading,
        clearLoad
    } from '@/common/global.js'
    import api from '@/common/api.js'
    export default {
        components: {
            bottomTabBar,
            plantList
        },
        data() {
            return {
                btnStatus: '',
                checkBox: true, // 是否展示选择框
                plantList: [], // 植物数据
                pageNum: 1,
                plantTotal: 0, // 总数
                noMore: false,
                selectRes: [], // 选择结果
            };
        },
        computed: {
            ...mapState({
                bottomLoading: state => state.bottomLoading,
                personInfo: state => state.personInfo,
                loginStatus: state => state.loginStatus
            })
        },
        methods: {
            // 初始化数据
            init() {
                this.plantList = [];
                this.pageNum = 1;
            },
            /**
             * 完成编辑
             * */
            completeEdit() {
                this.btnStatus = '';
                this.selectRes = []
                for (var k in this.plantList) {
                    if (this.plantList[k].checkBox) {
                        this.selectRes.push(this.plantList[k].historyId)
                    }
                }
                console.log('删除记录', this.selectRes)
                this.delHistoryReq(res => {
                    if (res.status === 0) {
                        this.init();
                        successToast(res.msg)
                        this.historyReq(res => {
                            this.plantTotal = res.total;
                        });
                    }
                })
            },
            /**
             * 获取历史记录请求
             * */
            historyReq(cb) {
                let params = {
                    phone: this.personInfo.phone,
                    token: this.personInfo.token,
                    pageNum: this.pageNum,
                    pageSize: 8
                }
                api.getHistory(params, res => {
                    if (res.data.status === 0) {
                        this.plantList = [...this.plantList, ...res.data.data];
                        this.plantList.forEach(item => {
                            this.plantList.checkBox = false;
                        })
                        this.pageNum++;
                        cb && cb(res.data)
                    }
                })
            },
            /**
             * 删除历史记录
             * 历史id数组
             * */
            delHistoryReq(cb) {
                let params = {
                    historyId: JSON.stringify(this.selectRes),
                    token: this.$store.state.personInfo.token,
                    phone: this.$store.state.personInfo.phone
                }
                api.delHistory(params, res => {
                    cb && cb(res.data);
                })
            },
            timeFormat(time, format) {
                return timeDate(time, format)
            },
            selCheck(e, index) {
                this.btnStatus = '';
                let item = this.plantList[index];
                item.checkBox = !item.checkBox;
                this.btnStatus = 'edit'
            },
            toLogin() {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
        },
        onReachBottom() {
            if (this.btnStatus === 'edit') {
                return;
            }
            if (this.plantList.length >= this.plantTotal) {
                this.noMore = true;
                return;
            }
            this.historyReq();
        },
        onShow() {
            if (!this.loginStatus) {
                return;
            }
            loading('加载数据中...');
            this.historyReq(res => {
                this.plantTotal = res.total;
                clearLoad()
            })
        }
    }
</script>

<style lang="less" scoped>
    .history {
        padding: 15rpx;

        .btn-group {
            position: fixed;
            top: 65rpx;
            right: 50rpx;
            /* ifdef H5*/
            // top: 18rpx;
            // right: 10rpx;
            /*endif*/
            z-index: 999;
        }

        .time {
            position: absolute;
            top: 30rpx;
            right: 102rpx;
            z-index: 88;
            color: #9f9f9f;
        }

        .checkBox {
            position: absolute;
            top: 10rpx;
            right: 15rpx;
            z-index: 9;
        }

        .box {
            width: 100%;
            height: 100%;
            // background: #ff5500;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 998;
        }

        .noLogin {
            color: #c0c4cc;
            font-size: 28rpx;
        }
    }
</style>
